window.addEventListener('load', function () {
    let total = document.querySelector('.total')
    let avgSalary = document.querySelector('.avgSalary')
    let avgAge = document.querySelector('.avgAge')
    let proportion = document.querySelector('.proportion')
    let btn = document.querySelector('.btn')
    let batch = document.querySelector('#batch')
    axios({
        method: 'get',
        url: '/student/overview'
    }).then(res => {
        // console.log(res);
        total.innerText = res.data.data.total
        avgSalary.innerText = res.data.data.avgSalary
        avgAge.innerText = res.data.data.avgAge
        proportion.innerText = res.data.data.proportion
    })

    //获取所有学员信息
    function init() {
        axios({
            method: 'get',
            url: '/student/list'
        }).then(res => {
            // console.log(res);
            let data = res.data.data
            let pieArr = []
            let names = []
            let salarys = []
            let trueSalarys = []
            //地图数据
            let chinaGeoCoordMap = {}
            let chinaDatas = []
            //提取饼图数据，遍历从接口获取的原始数据
            data.forEach(value => {
                //方法一：过滤出是否有这个数据
                let obj = pieArr.filter(v => {
                    return v.name == value.province
                })[0]
                //方式二：用for循环遍历是否有这个数据
                // let obj
                // for (let i = 0; i < pieArr.length; i++) {
                //     if (pieArr[i].name == value.province) {
                //         obj = pieArr[i]
                //     }
                // }
                //如果存在过，之前已有同一个省份数据，则数量+1
                if (obj) {
                    obj.value++
                    //没有存在过，就新增一个
                } else {
                    pieArr.push({ value: 1, name: value.province })
                }

                //提取折线图的数据
                names.push(value.name)
                salarys.push(value.salary)
                trueSalarys.push(value.truesalary)

                //#region 提取的数据
                chinaGeoCoordMap[value.province] = [value.jing, value.wei]
                chinaDatas.push([{ name: value.province, value: 0 }])
                //#endregion
            })
            // 调用方法生成动态饼图
            createPie(pieArr)
            //调用方法生成动态折线图
            createLine(names, salarys, trueSalarys)
            //调用方法生成动态地图
            mapChart(chinaGeoCoordMap, chinaDatas)
        })
    }
    init()

    //按组获取成绩,赋值给柱状图
    function getScore(batch) {
        axios({
            method: 'get',
            url: `/score/batch?batch=${batch}`
        }).then(res => {
            // console.log(res);
            createBar(res.data.data)
        })
    }
    getScore(3)
    //生成静态柱状图
    function createBar(data) {
        if (!data.group) {
            returnX
        }
        let myChart = echarts.init(document.querySelector('.barChart'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data: ['平均分', '低于60分人数', '60-80分之间', '高于80分人数']
            },
            grid: {
                top: '10%',
                left: '2%',
                right: '2%',
                bottom: '2%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: [1, 2, 3, 4, 5, 6, 7, 8],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    min: 0,
                    max: 100,
                    interval: 10,
                    axisLabel: {
                        formatter: '{value} 分'
                    }
                },
                {
                    type: 'value',
                    min: 0,
                    max: 10,
                    interval: 1,
                    axisLabel: {
                        formatter: '{value} 人'
                    }
                }
            ],
            series: [
                {
                    name: '平均分',
                    type: 'bar',
                    barWidth: 20,
                    data: data.avgScore
                },
                {
                    name: '低于60分人数',
                    type: 'bar',
                    barWidth: 20,
                    yAxisIndex: 1,
                    data: data.lt60
                },
                {
                    name: '60-80分之间',
                    type: 'bar',
                    barWidth: 20,
                    yAxisIndex: 1,
                    data: data.gt60
                },
                {
                    name: '高于80分人数',
                    type: 'bar',
                    barWidth: 20,
                    yAxisIndex: 1,
                    data: data.gt80
                },
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
    }
    // createBar()

    //饼图
    function createPie(data) {
        let myChart = echarts.init(document.querySelector('.pie'));
        option = {
            title: {
                text: '籍贯分布',
                left: 'left'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [10, 150],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
    }
    // createPie()

    //折线图
    function createLine(names, salarys, trueSalarys) {
        let myChart = echarts.init(document.querySelector('.line'));
        option = {
            title: {
                text: 'Stacked Line'
            },
            tooltip: {
                trigger: 'axis'
            },
            dataZoom: [
                {
                    start: 0,
                    end: 10
                }
            ],
            legend: {
                data: ['期望新资', '实际薪资']
            },
            xAxis: {
                type: 'category',
                data: names
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '期望新资',
                    data: salarys,
                    type: 'line',
                    showSymbol: false,
                    smooth: true,
                    lineStyle: {
                        color: '#ee6666'
                    }
                },
                {
                    name: '实际薪资',
                    data: trueSalarys,
                    type: 'line',
                    showSymbol: false,
                    smooth: true,
                    lineStyle: {
                        color: '#5470c6'
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
    }
    // createLine()

    btn.addEventListener('click', function () {
        if (batch.style.display == 'block') {
            batch.style.display = 'none'
        } else {
            batch.style.display = 'block'
        }
    })
    batch.addEventListener('click', function (e) {
        getScore(e.target.dataset.index)
    })

    //生成地图
    function mapChart(chinaGeoCoordMap, chinaDatas) {
        let myChart = echarts.init(document.querySelector('.map'))
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = chinaGeoCoordMap[dataItem[0].name];
                var toCoord = [113.434345, 23.135522];
                if (fromCoord && toCoord) {
                    res.push([{
                        coord: fromCoord,
                        value: dataItem[0].value
                    }, {
                        coord: toCoord,
                    }]);
                }
            }
            return res;
        };
        var series = [];
        ;[['广东省', chinaDatas]].forEach(function (item, i) {
            console.log(item)
            series.push({
                type: 'lines',
                zlevel: 2,
                effect: {
                    show: true,
                    period: 4, //箭头指向速度，值越小速度越快
                    trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: 'arrow', //箭头图标
                    symbolSize: 5, //图标大小
                },
                lineStyle: {
                    normal: {
                        width: 1, //尾迹线条宽度
                        opacity: 1, //尾迹线条透明度
                        curveness: .3 //尾迹线条曲直度
                    }
                },
                data: convertData(item[1])
            }, {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: { //涟漪特效
                    period: 4, //动画时间，值越小速度越快
                    brushType: 'stroke', //波纹绘制方式 stroke, fill
                    scale: 4 //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right', //显示位置
                        offset: [5, 0], //偏移设置
                        formatter: function (params) {//圆环显示文字
                            return params.data.name;
                        },
                        fontSize: 13
                    },
                    emphasis: {
                        show: true
                    }
                },
                symbol: 'circle',
                symbolSize: function (val) {
                    return 5 + val[2] * 5; //圆环大小
                },
                itemStyle: {
                    normal: {
                        show: false,
                        color: '#f00'
                    }
                },
                data: item[1].map(function (dataItem) {
                    return {
                        name: dataItem[0].name,
                        value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                    };
                }),
            },
                //被攻击点
                {
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    rippleEffect: {
                        period: 4,
                        brushType: 'stroke',
                        scale: 4
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            //offset:[5, 0],
                            color: '#0f0',
                            formatter: '{b}',
                            textStyle: {
                                color: "#0f0"
                            }
                        },
                        emphasis: {
                            show: true,
                            color: "#f60"
                        }
                    },
                    symbol: 'pin',
                    symbolSize: 50,
                    data: [{
                        name: item[0],
                        value: chinaGeoCoordMap[item[0]].concat([10]),
                    }],
                }
            );
        });

        // 
        let option = {
            // 标题
            title: {
                // left: 'center',
                text: '来广路线 From',
                textStyle: {
                    color: '#6d767e'
                }
            },
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(166, 200, 76, 0.82)',
                borderColor: '#FFFFCC',
                showDelay: 0,
                hideDelay: 0,
                enterable: true,
                transitionDuration: 0,
                extraCssText: 'z-index:100',
                formatter: function (params, ticket, callback) {
                    //根据业务自己拓展要显示的内容
                    var res = "";
                    var name = params.name;
                    var value = params.value[params.seriesIndex + 1];
                    res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
                    return res;
                }
            },
            backgroundColor: "#fff",
            visualMap: { // 图例值控制（官方叫做视觉映射组件）
                min: 0,
                max: 1,
                calculable: true,
                show: false,
                color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
                textStyle: {
                    color: '#fff'
                }
            },
            geo: {
                map: 'china',
                zoom: 1.2,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true, //是否允许缩放
                itemStyle: {
                    normal: {
                        color: 'rgba(51, 69, 89, .5)', //地图背景色
                        borderColor: '#516a89', //省市边界线00fcff 516a89
                        borderWidth: 1
                    },
                    emphasis: {
                        color: 'rgba(37, 43, 61, .5)' //悬浮背景
                    }
                }
            },
            series: series
        };

        myChart.setOption(option);
    }

    // mapChart();
})